<template>
  <!-- 头部 -->
  <van-header title="推荐"></van-header>
  <div class="loading" v-if="HOMEPAGE_BLOCK_PLAYLIST_RCMD.length == 0">
    <van-loading size="24px" vertical>加载中...</van-loading>
  </div>
  <div class="page" v-else>
    <!-- 轮播 -->
    <van-swipe class="swiper" :autoplay="3000" indicator-color="blue">
      <van-swipe-item class="swiper-item" v-for="(item, index) in HOMEPAGE_BANNER" :key="index">
        <img :src="item.pic" />
        <span :style="{ color: item.titleColor }">{{ item.typeTitle }}</span>
      </van-swipe-item>
    </van-swipe>
    <!-- 宫格导航 -->
    <van-my-grid :list="gridnavs.data"></van-my-grid>
    <!-- 各个楼层：推荐、流行等 -->
    <!-- 推荐歌单 -->
    <div class="floor" v-if="HOMEPAGE_BLOCK_PLAYLIST_RCMD">
      <div class="floor-header">
        <p>推荐歌单</p>
        <span @click="handleGoMorePage('/more')">更多&nbsp;></span>
      </div>
      <van-floor-defaut :list="HOMEPAGE_BLOCK_PLAYLIST_RCMD"></van-floor-defaut>
    </div>
    <!-- 歌曲推荐 -->
    <div class="floor" v-if="HOMEPAGE_BLOCK_STYLE_RCMD">
      <div class="floor-header">
        <p>{{ HOMEPAGE_BLOCK_STYLE_RCMD.subTitle.title }}</p>
        <span @click="handleGoMorePage('/songrcmd')">更多&nbsp;></span>
      </div>
      <van-floor-swipe :list="HOMEPAGE_BLOCK_STYLE_RCMD.creatives"></van-floor-swipe>
    </div>
    <!-- 网友精选碟 -->
    <div class="floor" v-if="HOMEPAGE_BLOCK_TOP_PLAYLIST">
      <div class="floor-header">
        <p>网友精选碟</p>
        <span></span>
      </div>
      <van-floor-scroll :list="HOMEPAGE_BLOCK_TOP_PLAYLIST"></van-floor-scroll>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useMyRouters } from '@/router';
import VanHeader from '@/components/header/Header.vue';
import VanMyGrid from '@/components/grid/Grid.vue';
import VanFloorDefaut from '@/components/floor/FloorDefaut.vue';
import VanFloorSwipe from '@/components/floor/FloorSwipe.vue';
import VanFloorScroll from '@/components/floor/FloorScroll.vue';

// mock
import gridnavs from '@/api/mock/navs.json';

// api
import { getBanner } from '@/api/wangyi/banner';
import { getPlayList, getTopPlayListHighquality } from '@/api/wangyi/playlist';
import { getHomePageBlockPage } from '@/api/wangyi/home';

const { router } = useMyRouters();

// HOMEPAGE_BANNER;
const HOMEPAGE_BANNER = ref([]);
// HOMEPAGE_DRAGON_BALL
const HOMEPAGE_DRAGON_BALL = ref([]);
// HOMEPAGE_BLOCK_PLAYLIST_RCMD 推荐歌单;
const HOMEPAGE_BLOCK_PLAYLIST_RCMD = ref([]);
// HOMEPAGE_BLOCK_STYLE_RCMD 「春夏秋冬」相似推荐;
const HOMEPAGE_BLOCK_STYLE_RCMD = ref();
// HOMEPAGE_BLOCK_NEW_ALBUM_NEW_SONG 新歌 新碟 数字专辑;
const HOMEPAGE_BLOCK_NEW_ALBUM_NEW_SONG = ref();
// HOMEPAGE_MUSIC_CALENDAR 音乐日历;
const HOMEPAGE_MUSIC_CALENDAR = ref();
// HOMEPAGE_MUSIC_MLOG 精选音乐视频(合集);
const HOMEPAGE_MUSIC_MLOG = ref();
// HOMEPAGE_BLOCK_MGC_PLAYLIST 网易云音乐的雷达歌单;
const HOMEPAGE_BLOCK_MGC_PLAYLIST = ref();
// HOMEPAGE_BLOCK_OFFICIAL_PLAYLIST 专属场景歌单;
const HOMEPAGE_BLOCK_OFFICIAL_PLAYLIST = ref();
// HOMEPAGE_VOICELIST_RCMD 热门播客 有声书;
const HOMEPAGE_VOICELIST_RCMD = ref();
// HOMEPAGE_PODCAST24 广播电台 24小时播客;
const HOMEPAGE_PODCAST24 = ref();
// HOMEPAGE_BLOCK_VIDEO_PLAYLIST 视频合辑;
const HOMEPAGE_BLOCK_VIDEO_PLAYLIST = ref();

const HOMEPAGE_BLOCK_HOT_TOPIC = ref([]);
const HOMEPAGE_BLOCK_TOP_PLAYLIST = ref([]);

onMounted(() => {
  // 获取Banner
  getBanner({ type: 2 }).then(res => {
    HOMEPAGE_BANNER.value = res.banners;
  });
  // 获取推荐歌单
  getPlayList({ limit: 6 }).then(res => {
    HOMEPAGE_BLOCK_PLAYLIST_RCMD.value = res.result;
  });
  // 获取首页数据
  getHomePageBlockPage().then(res => {
    HOMEPAGE_BLOCK_STYLE_RCMD.value = getHomePageBlockStyleRCMD(res.HOMEPAGE_BLOCK_STYLE_RCMD);
    HOMEPAGE_BLOCK_NEW_ALBUM_NEW_SONG.value = getHomePageBlockNewAlbumSong(res.HOMEPAGE_BLOCK_NEW_ALBUM_NEW_SONG);
  });
  // 获取网友精选碟
  getTopPlayListHighquality({ limit: 12 }).then(res => {
    HOMEPAGE_BLOCK_TOP_PLAYLIST.value = res.playlists;
  });
});

function getHomePageBlockPlayListRCMD(res) {
  return getHomePageBlockStyleRCMD(res);
}

function getHomePageBlockStyleRCMD(res) {
  const { button, subTitle } = res.uiElement;
  const creatives = res.creatives;
  return { button, subTitle, creatives };
}

function getHomePageBlockNewAlbumSong(res) {
  const creatives = res.creatives;
  return [creatives[0], creatives[1]];
}

function handleGoMorePage(to) {
  router.push({
    path: to
  });
}
</script>

<style lang="less" scoped>
// 轮播
.swiper {
  width: 100%;
  height: 160px;
  border-radius: 10px;
  .swiper-item {
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      display: block;
      padding: 5px;
      border-radius: 5px;
      position: absolute;
      right: 0;
      top: 0;
      background: rgba(0, 0, 0, 0.199);
    }
  }
}

// 楼层
.floor {
  padding: 10px 0;
  img {
    width: 100%;
    height: 110px;
    border-radius: 10px;
  }
  .floor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    p {
      font-size: 14px;
      font-weight: 600;
    }
    span {
      color: #969799;
    }
  }
}
</style>
